<template>
  <!-- 整个盒子 -->
  <view class="shadow box">
    <view class="box2">
      <image class="goodsimg" :src="qgGoodsList.imageSrc"></image>
      <view class="txtName u-line-1">{{qgGoodsList.name}}</view>
      <!-- btn 立即抢购 -->
      <image :src="btnSrc" class="btnPay"></image>
      <!-- <view :style="{width: (80+qgGoodsList.nowPrice.length*15) + 'rpx',left:qgGoodsList.nowPrice.length+qgGoodsList.olderPrice.length===8?5:10+'rpx'}" style="position: relative;top: 20rpx;background-image:linear-gradient(90deg,rgb(255, 49, 48),rgb(246, 89, 7)); height: 36rpx;border-radius: 10rpx 14rpx 14rpx 10rpx;">
          <view style="position: relative;left: 5rpx;font-size: 22rpx;line-height: 42rpx; color: #FFFFFF;">￥</view>
          <view class="font-weight" style="position: relative;top: -44rpx;left: 30rpx;font-family: AdobeHeitiStd-Regular;font-size: 32rpx;line-height: 42rpx;color: #FFFFFF;">{{qgGoodsList.nowPrice}}</view>
        </view>
        <view :style="{left: (70+qgGoodsList.nowPrice.length*10) + 'rpx',width: (80+qgGoodsList.olderPrice.length*10) + 'rpx'}" style="position: relative;top: -18rpx; height: 36rpx;background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/621652a25a7e3f03105c7dbc/622087a84fa9330011951ded/16462995302885182684.png);border-radius: 0rpx 25rpx 25rpx 0rpx;">
          <view class="line-through" style="position: relative;top: 0rpx;left: 20rpx;font-size: 25rpx;line-height: 42rpx; 
          color: #000000;">￥{{qgGoodsList.olderPrice}}</view>
          <image style="position: relative;top: -40rpx;left: -8rpx;width: 26rpx;height: 40rpx;background-size: 100% 100%;" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/621652a25a7e3f03105c7dbc/622087a84fa9330011951ded/16462995306607066951.png"></image>
        </view> -->
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-qggoods",
    props: {
      // 抢购商品的信息对象
      qgGoodsList: {
        type: Object,
        default: {},
      },

    },
    data() {
      return {
        btnSrc: 'http://cn.shichengtai.xyz/icon/limitKill.png',
      };
    },

  }
</script>

<style lang="scss">
  // 倒计时
  .time {
    @include flex;
    align-items: center;

    &__custom {
      margin-top: 4px;
      width: 22px;
      height: 22px;
      background-color: #FFFFFF;
      border-radius: 4px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;

      &__item {
        color: #f14553;
        font-size: 12px;
        text-align: center;
      }
    }

    &__doc {
      color: #FFFFFF;
      padding: 0px 4px;
    }

    &__item {
      color: #606266;
      font-size: 15px;
      margin-right: 4px;
    }
  }

  .box {
    width: 300rpx;
    height: 350rpx;
    margin-top: 15rpx;
    margin-left: 15rpx;
    margin-bottom: 15rpx;
  }

  .box2 {
    width: 300rpx;
    height: 370rpx;
  }

  .goodsimg {
    width: 300rpx;
    height: 210rpx;
  }

  .txtName {
    font-size: 32rpx;
    margin-left: 5%;
  }

  .btnPay {
    width: 80%;
    height: 20%;
    margin-left: 10%;
    margin-top: 10rpx;
  }
</style>
